import React,{Fragment,useState} from 'react'
import Head from 'next/head'
import Link from 'next/link'
import { Row,Col,Card,Icon,List } from 'antd'
import Header from '../components/Header'
import Author from '../components/Author'
import Advert from '../components/Advert'
import '../public/style/index.less'
import Footer from '../components/Footer';
import axios from 'axios'
import { servicePath } from "../config/apiUrl"
import marked from 'marked'
import hljs from 'highlight.js'
import 'highlight.js/styles/monokai-sublime.css'

const ListItem = List.Item;
const Home = (props) => {
  let resList = props.data;
  const [myList,setMyList] = useState([...resList])
  const renderer = new marked.Renderer();
  marked.setOptions({
      renderer:renderer,
      gfm:true,
      sanitize:true,
      tables:true,
      breaks:true,
      smertLists:true,
      highlight:function(code){
        return hljs.highlightAuto(code).value
      }
  })
  return (<Fragment>
    <Head>
      <title>Home</title>
      <link rel="icon" href="/favicon.ico" />
    </Head>
    <Header/>
    <Row className="comm-main" type="flex" justify="center" >
        <Col className="comm-left" xs={23} sm={23} md={18} lg={14} xl={13} >
         <div>
           <List
              header={<div className="comm-box">最新日志</div>}
              itemLayout="vertical"
              dataSource={myList}
              renderItem={item=>{
                return (
                  <ListItem>
                    <div className="list-title">
                      <Link href={{pathname:"/detail",query:{id:item.id}}}>
                        <a>{item.title}</a>
                      </Link>
                    </div>
                    <div className="list-icon">
                      <span><Icon type="calendar" />{item.addTime}</span>
                      <span><Icon type="folder" />{item.typeName}</span>
                      <span><Icon type="fire" /> {item.view_count}人</span>
                    </div>
                    <div className="list-context" dangerouslySetInnerHTML={{__html:marked(item.introduce)}}></div>
                  </ListItem>
                )
              }}
           />
         </div>
        </Col>
        <Col className="comm-right" xs={0} sm={0} md={5} lg={4} xl={5} >
          <Author/>
          <Advert/>
        </Col>
    </Row>
    <Footer/>
  </Fragment>)
}

Home.getInitialProps = async ()=>{
  const promise = new Promise((resolve)=>{
    axios(servicePath.getArticleList).then((res)=>{
      resolve(res.data);
    })
  })
  return promise
}

export default Home
